<script setup>
import SpeakerIcon from '@/components/icons/SpeakerIcon.vue'
import SuccessAudio from '@/assets/audios/greetings.mp3'
import FailAudio from '@/assets/audios/part2-suggestion.mp3'

const fraction = defineModel('fraction', { type: Number })
const correctCount = defineModel('correctCount', { type: Number })
const currentScore = defineModel('currentScore', { type: Number })
const questionStage = defineModel('questionStage', { type: String })
const props = defineProps({
  question: Array || String,
  options: Array,
  rightOption: Number
})

const audioUrl = import.meta.env.VITE_PART2_AUDIO_URL || ''

const handleClick = (o) => {
  // 车厢部分
  // locomotive 火车头
  // fuel 燃油车厢
  // wagon 火车车厢
  // converter 转换器
  // tail 火车尾
  // end 结束
  if (questionStage.value === 'locomotive') {
    questionStage.value = 'fuel'
  } else if (questionStage.value === 'fuel') {
    questionStage.value = 'wagon'
  } else if (questionStage.value === 'wagon') {
    questionStage.value = 'converter'
  } else if (questionStage.value === 'converter') {
    questionStage.value = 'tail'
  } else if (questionStage.value === 'tail') {
    questionStage.value = 'end'
  }
  console.log(o)
  if (o.optionId === props.rightOption) {
    console.log('right')
    const audio = new Audio(SuccessAudio)
    audio.play()
    correctCount.value++
    currentScore.value++
    fraction.value++
  } else {
    currentScore.value = Math.max(0, currentScore.value - 1)
    const audio = new Audio(FailAudio)
    audio.play()
    fraction.value--
  }
}

const speakAdult = (text) => {
  const tempText = text.slice(3).replace(/\?/g, '？').replace(/!/g, '！')
  console.log(`${audioUrl}/adult/${tempText}.mp3`)
  const audio = new Audio(`${audioUrl}/adult/${tempText}.mp3`)
  audio.play()
}

const speakKid = (text) => {
  console.log(text)
  const tempText = text.slice(2).replace(/\?/g, '？').replace(/!/g, '！')
  console.log(`${audioUrl}/boy/${tempText}.mp3`)
  const audio = new Audio(`${audioUrl}/boy/${tempText}.mp3`)
  audio.play()
}
</script>
<template>
  <div class="question-box">
    <div style="margin: 0 8px">
      <div
        v-for="(item, index) in question"
        :key="index"
        style="display: flex; align-items: center"
      >
        <span style="font-size: 20px; margin-right: 12px">{{ item }}</span>
        <speaker-icon :size="28" v-if="!item.startsWith('你')" @click="speakAdult(item)" />
      </div>
    </div>
    <div style="display: flex; flex-direction: column">
      <div class="option-box" v-for="(o, index) in options" :key="index">
        <div class="base-border option" @click="handleClick(o)">{{ o.optionContent }}</div>
        <speaker-icon :size="32" @click="speakKid(o.optionContent)" />
      </div>
    </div>
  </div>
</template>
<style scoped>
.question-box {
  border-radius: 20px;
  background-color: #f1ce9a;
  box-shadow: 0 0 0 8px #9a5e37;
  width: 400px;
  height: fit-content;
  padding: 8px;
}

.base-border {
  background-color: #ffe2b3;
  border: 4px solid #f55a36;
  font-size: 18px;
  border-radius: 20px;
}

.option {
  padding: 4px;
  flex: 1;
  margin-right: 12px;
}

.option-box {
  margin: 8px 0;
  display: flex;
  align-items: center;
}
</style>
